<template>
  <div>
    <h3>动态rules</h3>
    <div class="message-info">
      实际业务场景中， 一个表单内会存在需要动态校验的字段，
      但是为了数据收集的便利性， 我们又不好将这些字段拆分成
      <span style="color: red">多个表单</span>
    </div>
    <div class="message-info">
      具体场景：
      <div>
        当选择， 男， 只校验<span class="red">手机号</span>和<span class="red"
          >姓名</span
        >不为空；
      </div>
      <div>选择女， 所有信息都校验</div>
    </div>

    <el-form ref="form" inline :model="formModel" :rules="rules">
      <el-form-item label="选项" prop="sex">
        <el-select v-model="formModel.sex" clearable>
          <el-option :value="1" label="男"></el-option>
          <el-option :value="2" label="女"></el-option>
        </el-select>
      </el-form-item>
      <div>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formModel.name" clearable></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="formModel.age" clearable></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="地址" prop="address">
          <el-input v-model="formModel.address" clearable></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formModel.phone" clearable></el-input>
        </el-form-item>
      </div>
      <div>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </el-form>

    <div style="margin-top: 20px">
      <json-view
        v-show="isShowJSON"
        :data="jsonData"
        v-bind="getConfig"
      ></json-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DynamicRules',
  data () {
    return {
      rules: {
        sex: [
          { required: true, message: '请选择', trigger: ['change', 'blur'] }
        ]
      },
      allrules: {
        name: [
          { required: true, message: '姓名不能为空哦', trigger: ['change', 'blur'] }
        ],
        age: [
          { required: true, message: '姓名不能为空哦', trigger: ['change', 'blur'] }
        ],
        phone: [
          { required: true, message: '手机号不能为空哦', trigger: ['change', 'blur'] }
        ],
        address: [
          { required: true, message: '地址不能为空哦', trigger: ['change', 'blur'] }
        ]
      },
      formModel: {
        sex: '',
        name: '',
        age: '',
        phone: '',
        address: ''
      },
      jsonData: {}
    }
  },
  computed: {
    isShowJSON () {
      return !this.jsonData || Object.keys(this.jsonData).length !== 0
    },
    getConfig () {
      return {
        theme: 'vs-code',
        deep: 5
      }
    }
  },
  watch: {
    'formModel.sex' (val) {
      this.$refs['form'].clearValidate()
      // 男
      if (val === 1) {
        let maleRules = {}
        Object.keys(this.allrules).forEach(key => {
          if (['name', 'phone'].includes(key)) {
            maleRules[key] = this.allrules[key]
          }
        })

        // 错误写法， maleRules 不是响应式, 通过下面的 this.rules 可以看到 maleRules 里面的字段非响应式， 没有 get 和 set
        // Object.assign(this.rules, {...maleRules})

        // 这种可以
        this.rules = Object.assign({}, this.rules, { ...maleRules })

      } else {
        this.rules = Object.assign({}, this.rules, { ...this.allrules })
      }

      // 一定要检测这里， 属性是否都有 get, set , 没有就不是响应式
      console.log(this.rules)
    }
  },
  methods: {
    submit () {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          this.jsonData = {}
          return
        }

        this.jsonData = this.formModel
      })
    }
  }
}
</script>
<style lang="less" scoped>
.message-info {
  padding: 6px 0;
}
.red {
  color: red;
}
</style>